Top React Hooks — Lifecycle Hooks

Hooks contains our logic code in our React app.

We can create our own hooks and use hooks provided by other people.

In this article, we’ll look at some useful React hooks.

react-use

The react-use library is a big library with many handy hooks.

useMountedState

The useMountedState hook lets us check a component’s mount state.

It returns a function that returns true is it’s mounted and false if it’s not.

For instance, we can write:

import React from "react";
import { useMountedState } from "react-use";

export default function App() {
  const isMounted = useMountedState();

  return <div>{isMounted() ? "mounted" : "not mounted"}</div>;
}

We can just use the returned value to check if the component is mounted.

useUnmountPromise

The useUnmountPromise hook lets us check the mounted state with a promise.

The promise doesn’t resolve if the component unmounts.

For instance, we can write:

import React from "react";
import useUnmountPromise from "react-use/lib/useUnmountPromise";

export default function App() {
  const mounted = useUnmountPromise();

  const callback = async () => {
    await mounted(Promise.resolve(1));
  };

  React.useEffect(callback, []);

  return <div />;
}

We pass in a promise to the mounted function that runs when the component is mounted.

It also takes an error callback than runs when the component is unmounted.

usePromise

The usePromise hook returns a helper function that wraps promises.

Promises in the function only resolves when the component is mounted.

For instance, we can write:

import React from "react";
import { usePromise } from "react-use";

export default function App() {
  const mounted = usePromise();
  const [value, setValue] = React.useState();

  const onMount = async () => {
    const value = await mounted(Promise.resolve(1));
    setValue(value);
  };

  React.useEffect(() => {
    onMount();
  });

  return <div>{value}</div>;
}

We call the usePromise hook to return the mounted function.

The mounted function takes a promise and returns a promise that resolves to the value of the promise we passed to it.

Then we can use the resolved value however we like.

useLogger

The useLogger lets us logs component transitions.

To use it, we can write:

import React from "react";
import { useLogger } from "react-use";

const Counter = props => {
  useLogger("Counter", props);
  return props.count;
};

export default function App() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>increment</button>
      <p>
        <Counter count={count} />
      </p>
    </div>
  );
}

We have the Counter prop that has the useLogger hook.

It takes the props from the component and logs it.

Then when we pass values to the count prop, they’ll all be logged.

useMount

The useMount hook lets us call a function after the component is mounted.

To use it, we can write:

import React from "react";
import { useMount } from "react-use";

export default function App() {
  useMount(() => console.log("mounted"));

 return <div />;
}

to use it.

We just pass in a callback that runs when the component is mounted.

Conclusion

The react-use library provides us with lifecycle hooks for running code on mount, unmount, and log the values.